<template>
<div>
  项目踩过坑
</div>
</template>
<script>
import header from './components/header/header.vue'; // header是原生标记,即不可作为组件名称
import $http from './utils/http.js';
import api from './api/app.js';

export default {
  components: {
    'v-header': header
  },
  data() {
    return {
      seller: {}
    };
  },
  created() {
    //this.sellerInfo(); // 在这结束loading，还做一些初始化，实现函数自执行
    this.get();  
  },
  methods:{
    /**
     * async异步函数,即使不写await的时候，async返回的是一个promise对象
     * await将返回的promise对象转换成json数据,针对post请求封装中return axios之后再次进行then()处理都不会将promise对象改变成json数据
     */
    sellerInfo: async function(){
        const res =  await $http.post(api.seller);
        console.log(res);
    },
    get(){
      /**
       * promise同步函数，针对post请求封装return axios之后需要进行then()处理，然后在调用方法中再次进行then()处理，才可以将promise对象改变成json数据
       */
       const resp =  $http.get2(api.seller);
       resp.then((resp) => {
          console.log(resp);
       })

      const aa = _=> new Promise((res, rej) => { // 设置aa函数返回promise对象
            setTimeout(function() {
                console.log('1')
                res('2')
            }, 1000);
        })
      let bb = async function() {
          // await aa().then((res) => { // await会等待aa()执行完，并且then代码也执行完，当然，then代码里面的异步操作不会执行。
          //   console.log(res)
          //   setTimeout(function(){  
          //       console.log('4') // then中的代码执行完直接进入下一个then，这个then 其实return了undifined
          //       return 'sdf'
          //   }, 2000)
          // }).then(res => {
          //     console.log(res) // undifined
          // })
          // console.log('3')
         await aa();
         //return '22' // 直接返回22
      }

      //方法一：
      bb().then(res =>{
        console.log(res);
      })//返回 1 undefined(由于bb没有return所导致)
      
      //方法二:
      //console.log(bb()); 直接返回promise对象

      //方法三:
      // console: 
      //         Promise
      //         1
      //         2
      //         undifined
      //         3
      //         4
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "./assets/style/mixin.scss";
  .tab {
      display: flex;
      width: 100%;
      height: 40px;
      line-height: 40px;
      // border-bottom: 1px solid rgba(7,17,27, 0.1);
      @include border-1px(rgba(7, 17, 27, 0.1));
      .tab-item {
        flex: 1;
        text-align: center;
        display: block;
        font-size: 14px;
        color: rgb(77, 85, 93);
      }
      .active {
        color: rgb(240, 20, 20)
      }
  }
</style>
